<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="element-plus/index.css">
		<script src="element-plus/index.full.js"></script>
	</head>
	<body>
		<div id='app'>
			<el-card style="max-width: 500px;margin: 50px auto;">
				<el-form ref='registerForm' label-width='100' :rules='rules' :model='form'>
					<!-- 姓名不能为空 -->
					<el-form-item label='学生姓名' prop='student'>
						<el-input v-model='form.student' placeholder='请输入学生姓名'></el-input>
					</el-form-item>
					<!-- 班级不能为空 -->
					<el-form-item label='班级' prop='class'>
						<el-input v-model='form.class' placeholder='请输入班级'></el-input>
					</el-form-item>
					<!-- 11位数字 -->
					<el-form-item label='联系方式' prop='number'>
						<el-input v-model='form.number' placeholder='请输入联系方式'></el-input>
					</el-form-item>
					<!-- 性别不能为空 -->
					<el-form-item label='性别' prop='sex'>
						<el-radio-group v-model='form.sex'>
							<el-radio :value='1'>男</el-radio>
							<el-radio :value='2'>女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button @click="post" type='primary'>添加学生</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						form: {
							student: '',
							class: '',
							number: '',
							sex: ''
						},
						rules: {
							student: [{
								required: true,
								message: '请输入学生姓名',
								trigger: 'blur'
							}],
							class: [{
								required: true,
								message: '请输入班级',
								trigger: 'blur'
							}],
							number: [{
								required: true,
								message: '请输入联系方式',
								trigger: 'blur'
							}, {
								min:11,
								max:11,
								message: '请输入11位数字',
								trigger: 'blur'
							}],

							sex: [{
								required: true,
								message: '请选择输入性别',
								trigger: 'change'
							}]
						},
						}
					},
					methods: {
						post() {
							this.$refs['registerForm'].validate(flag => {
								if (flag) {
									alert('校对通过，提交数据')
								} else {
									alert('未通过校对')
								}
							})
						}
					}
			}).use(ElementPlus).mount('#app')
		</script>
	</body>
</html>
